<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    a.ta:link {
      text-decoration: none;
      color:#633;
    }
    a.ta:hover {
      text-decoration: underline;
      color:#393;
    }
    a.ta:visited {
      text-decoration: none;
      color:#b66;
    }
    /*并列选择器，两种情况都是一样的样式
      #a1,li.ca 所有的id=a1或者，class=ca的li都是这个样式
    */
    a.ta2:link,a.ta2:visited {
      text-decoration: none;
      color:#337;
    }
    a.ta2:hover {
      background: #393;
      color:#fff;
    }
  </style>
</head>
<body>
  <p>
    <!--a[href="#test$$" class="ta"]*5{测试链接}-->
    <a href="#test01" class="ta">测试链接</a>
    <a href="#test02" class="ta">测试链接</a>
    <a href="#test03" class="ta">测试链接</a>
    <a href="#test04" class="ta">测试链接</a>
    <a href="#test05" class="ta">测试链接</a>
    <a href="#test06" class="ta">测试链接</a>
  </p>
  <p><a href="#tt01" class="ta2">再次测试</a>
    <a href="#tt02" class="ta2">再次测试</a>
    <a href="#tt03" class="ta2">再次测试</a>
    <a href="#tt04" class="ta2">再次测试</a>
    <a href="#tt05" class="ta2">再次测试</a>
    <a href="#tt06" class="ta2">再次测试</a></p>
</body>
</html>